<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="../vue.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

</head>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>
<body>

        <div id="app">
            {{ message }}
        </div>

        <div id="app-1">
            <div v-html="html"></div>
        </div>

        <div id="app-2">
            <!--v-bind 该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。-->
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
            <span title="我是提示信息">提示信息</span>
        </div>

        <div id="app-3">
            <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
            <br><br>
            <!--以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：-->
            <div v-bind:class="{'class1': class1}">
                directiva v-bind:class
            </div>
        </div>

        <div id="app-4">
            {{5+5}}<br>
            {{ ok ? 'YES' : 'NO' }}<br>
            {{ message.split('').reverse().join('') }}
            <div v-bind:id="'list-' + id">菜鸟教程:{{id}}</div>
        </div>

        <div id="app-5">
            <p>message5:{{message5}}</p>
            <input v-model="message5">
        </div>

        <div id="app-6">
            <!-- 在两个大括号中 -->
            {{ message6 | capitalize }}

            <!-- 在 v-bind 指令中 -->
            <!--<div v-bind:id="rawId | formatId"></div>-->
        </div>

    <!--声明式渲染-->
    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        //文本
        //数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
        // 使用 v-html 指令用于输出 html 代码：
        var app1 = new Vue({
            el:'#app-1',
            data:{
                html:'<h1>菜鸟教程</h1>'

            }
        });
        //除了文本插值，我们还可以像这样来绑定元素特性：
        //HTML 属性中的值应使用 v-bind 指令。
        var app2 = new Vue({
            el:'#app-2',
            data:{
                message:'页面加载于 ' + new Date().toLocaleString()

            }
        });
        //属性
        //HTML 属性中的值应使用 v-bind 指令
        var app3 = new Vue({
            el:'#app-3',
            data:{
                class1: false
            }
        });
        //表达式
        //Vue.js 都提供了完全的 JavaScript 表达式支持。
        var app4 = new Vue({
            el:"#app-4",
            data:{
                ok: true,
                message: 'RUNOOB',
                id : 1
            }
        });
        // 指令
        // 指令是带有 v- 前缀的特殊属性。
        // 指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：


        //修饰符
        /*修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
        例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

        <form v-on:submit.prevent="onSubmit"></form>
        */
        //用户输入
        //在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

        var app5 = new Vue({
            el:"#app-5",
            data:{
                message5: 'Runoob!'
            }
        })
        //过滤器
        // Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下
        var app6 = new Vue({
            el: '#app-6',
            data: {
                message6: 'runoob'
            },
            filters: {
                capitalize: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)
                }
            }
        });
        /*
        * 过滤器可以串联：

        {{ message | filterA | filterB }}
        过滤器是 JavaScript 函数，因此可以接受参数：

        {{ message | filterA('arg1', arg2) }}
        这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数，
         arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
        * */

        //缩写

        //v-bind 缩写
        <!-- 完整语法 -->
      /*  <a v-bind:href="url"></a>
        <!-- 缩写 -->
        <a :href="url"></a>*/


        //v-on 缩写
        <!-- 完整语法 -->
        /*<a v-on:click="doSomething"></a>
        <!-- 缩写 -->
        <a @click="doSomething"></a>*/



    </script>
    <!--现在数据和 DOM 已经被建立了关联，所有东西都是响应式的-->
    <!--app.message=任意值-->

</body>
</html>